<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../static/vue.js"></script>
</head>
<body>
<div id="root">
  <div>
    <input type="text" v-model="todoValue">
    <button @click="handleBtnClick">提交</button>
  </div>
  <ul>
    <todo-item v-bind:content="item"
               v-for="item in list">{{item}}
    </todo-item>
  </ul>
</div>

<script>
 /* //创建vue全局组件
  Vue.component("todo-item",{
    props:['content'],
    template:"<li>{{content}}</li>"
  })*/
var todoItem={
  props:['content'],
  template:"<li>{{content}}</li>"
 }

  var app=new Vue({
    el:'#root',
    components:{
      todoItem:todoItem
    },
    data:{
      list:[],
      todoValue:''
    },methods:{
      handleBtnClick:function () {
        this.list.push(this.todoValue);
        this.todoValue='';
      }
    }
  })
</script>
</body>
</html>
